'use client';

import { MainContext } from "@/src/providers/MainProvider";
import { Flex, Image } from "@chakra-ui/react";
import { useContext } from "react";

function ProductCard() {
  const {t} = useContext(MainContext);
    return (
            <Flex className="justify-between gap-16 items-center bg-gray-700/30 rounded-md px-16 py-6 shadow">
              <Image src="mouse_bg.png" h={"10rem"}/>
              <div className="flex flex-col gap-2">
              <div className="text-lg">{t('90020')}</div>
              <div className="relative">
                <svg className="w-6" viewBox="0 0 1316 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M1243.428571 329.142857c40.557714 0 73.142857 32.585143 73.142858 73.142857v219.428572c0 40.557714-32.585143 73.142857-73.142858 73.142857v91.428571c0 50.285714-41.142857 91.428571-91.428571 91.428572h-1060.571429A91.684571 91.684571 0 0 1 0 786.285714v-548.571428C0 187.428571 41.142857 146.285714 91.428571 146.285714h1060.571429C1202.285714 146.285714 1243.428571 187.428571 1243.428571 237.714286V329.142857z m0 292.571429v-219.428572h-73.142857V237.714286c0-10.276571-8.009143-18.285714-18.285714-18.285715h-1060.571429c-10.276571 0-18.285714 8.009143-18.285714 18.285715v548.571428c0 10.276571 8.009143 18.285714 18.285714 18.285715h1060.571429c10.276571 0 18.285714-8.009143 18.285714-18.285715V621.714286h73.142857z" fill="#ffffff" ></path></svg>
                <div className="absolute left-[0.2rem] top-[0.74rem] w-3 bg-green-600 h-2 text-[0.5rem]">
                </div>
                <div className="absolute left-[1.8rem] top-[0.6rem] w-8 text-center bg-transparent text-[0.8rem] leading-3">
                  88%
                </div>
              </div>
              <div className="flex items-center gap-2">
                 <div className="px-3 rounded bg-gray-600/40"><svg className="w-4" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25981" width="32" height="32"><path d="M29.44 298.538667A764.8 764.8 0 0 1 512 128c182.826667 0 350.72 63.872 482.56 170.538667l-53.589333 66.389333A679.808 679.808 0 0 0 512 213.333333C349.482667 213.333333 200.277333 270.08 83.029333 364.928L29.44 298.538667z m134.016 165.973333A552.362667 552.362667 0 0 1 512 341.333333a552.533333 552.533333 0 0 1 348.544 123.136l-53.632 66.389334A467.370667 467.370667 0 0 0 512 426.666667c-111.701333 0-214.314667 39.04-294.912 104.192l-53.632-66.389334z m134.058667 165.973333A339.925333 339.925333 0 0 1 512 554.666667c81.237333 0 155.861333 28.373333 214.485333 75.776l-53.632 66.389333A254.933333 254.933333 0 0 0 512 640c-60.928 0-116.906667 21.290667-160.853333 56.832l-53.632-66.389333z m134.058666 165.973334A127.445333 127.445333 0 0 1 512 768c30.464 0 58.453333 10.666667 80.426667 28.416L512 896l-80.426667-99.584z"  fill="#8a8a8a"></path></svg></div>
                 <div>2.4G</div>
              </div>
              </div>
            </Flex>
    );
}

export default ProductCard;